Frontend Plugin

概述

jezweb/claude-skills 项目中的前端插件集合，包含 10 个专门针对前端开发的技能，涵盖从主题配置到完整页面生成的完整工作流。

关键内容

1. 核心组成：包含 tailwind-theme-builder、shadcn-ui、react-patterns、design-review、landing-page、product-showcase、react-native、design-loop、design-system、walkthrough-video 等 10 个核心技能，形成了完整的前端开发工具链。

2. 依赖关系：Skills 之间有明确的依赖顺序，如 tailwind-theme-builder 为基础，shadcn-ui 基于主题配置，react-patterns 提供组件设计模式。这种依赖链确保了工作流程的一致性。

3. 落地页生成：提供 landing-page 和 product-showcase 等高阶技能，可根据描述直接生成完整的页面，采用输出驱动的设计方式。

4. 质量保证：通过 design-review 技能提供系统性的设计质量检查，按优先级输出改进建议，覆盖对比度、可访问性等关键指标，分为Critical、High、Medium三个级别。

5. 错误预防：特别关注前端开发中的常见陷阱，如 Tailwind v4 的配置变更（移除tailwind.config.ts，在CSS中配置）、CSS变量需加hsl()包装、tw-animate-css缺失等8个documented errors。

6. 架构模式：实现了Tailwind v4的强制四步架构模式（导入基础→定义CSS变量→映射到utility类→应用基础样式），确保主题配置的一致性。

7. 安装方式：通过 /plugin marketplace add jezweb/claude-skills 和 /plugin install frontend@jezweb-skills 命令安装。

来源

• 04_jezweb_claude_skills_frontend — Frontend Plugin 完整结构解析

相关

• jezweb/claude-skills — 所属项目
• Tailwind CSS v4 — 使用的技术
• shadcn/ui — 使用的组件库
• React — 使用的框架